<template>
    <div class="box">
        <div class="title">
            <h3>ToDo备忘录</h3>
        </div>
        <div class="todo-form">
            <todo-form @submitEvt="receiveEvt"/>
        </div>
        <div class="todo-list">
            <todo-list @delEvt="delEvt"  @actEvt="actEvt" :list="list"/>
        </div>
    </div>
</template>

<script>
    import  TodoForm from './TodoForm'
    import  TodoList from './TodoList'

    export default {
        data(){
            return{
                list:[]
            }
        },
        components:{
            TodoForm,
            TodoList
        },
        methods:{
            receiveEvt(obj){
                obj.id = Date.now();
                obj.state = "wait";
                console.log(obj);
                console.log('index的自定义submitEvt事件触发，并且成功回调receiveEvt');
                this.list.push(obj);
            },
            delEvt(id){
                console.log('自定义toggleEvt事件触发，并且成功回调delEvt');
                this.list = this.list.map(it => {
                    if(it.id === id){
                        it.state = 'done';
                    }
                    return it
                })
            },
            actEvt(id){
                console.log('自定义actEvt事件触发，并且成功回调actEvt');
                this.list = this.list.map(it => {
                    if(it.id === id){
                        it.state = 'wait';
                    }
                    return it
                })
            }
        }
    }
</script>

<style scoped>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .title{
        border-bottom: 2px solid slategrey;
    }
    h3{
        padding: 30px 0;
    }
</style>